<template>
  <div class="wangEditor" style="border: 1px solid #ccc">
    <toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <editor
      v-model="valueHtml"
      style="height: 410px;"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  nextTick,
  defineEmits,
  onMounted,
  defineProps,
  watch,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import axios from "axios";
import { UploadFile } from "@/api/login";

const emit = defineEmits(["onVal"]);
const props = defineProps({
  initValue: String,
  index: Number
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
const mode = ref("default");

onMounted(() => {
  nextTick(() => {
    // 界面节点更新完以后再修改值。
    valueHtml.value = props.initValue;
  });
});
watch(
  () => props.initValue,
  (value) => {
    // 父组件获取初始值
    valueHtml.value = value;
  }
);

// 文件上传(返回该文件服务器地址)
const editorUpload = async (file) => {
  const filedata = new FormData();
  filedata.append("files", file);
  filedata.append("file", file.name);
  const res = await UploadFile(filedata);
  if(res.code == 4202 && res.data.length) {
    return res.data[0].filePath;
  }
  return false;
};

// 工具栏配置
const toolbarConfig = {
  toolbarKeys: [
    "undo",
    "redo",
    "bold",
    "italic",
    "underline",
    "color",
    "indent",
    "fontSize",
    "justifyLeft",
    "justifyRight",
    "justifyCenter",
    "justifyJustify",
    "bulletedList",
    "numberedList",
    "insertLink",
    "clearStyle",
    "uploadVideo",
    "uploadImage",
  ],
};
const editorConfig = { MENU_CONF: {} };
editorConfig.placeholder = "请输入内容...";
// 图片上传配置
editorConfig.MENU_CONF["uploadImage"] = {
  maxFileSize: 5 * 1024 * 1024, // 5M
  // 单个文件上传成功之后
  onSuccess(file, res) {
    console.log(`${file.name} 上传成功`, res);
  },

  // 单个文件上传失败
  onFailed(file, res) {
    console.log(`${file.name} 上传失败`, res);
  },

  // 上传错误，或者触发 timeout 超时
  onError(file, err, res) {
    console.log(`${file.name} 上传出错`, err, res);
  },
  async customUpload(file, insertFn) {
    const response = await editorUpload(file);
    insertFn(response, file.name, response);
  },
};
// 视频上传配置
editorConfig.MENU_CONF["uploadVideo"] = {
  maxFileSize: 10 * 1024 * 1024, // 10M
  async customUpload(file, insertFn) {
    const response = await editorUpload(file);
    // poster (视频封面图片)
    // insertFn(response, poster);
    insertFn(response, "");
  },
};
// 返回富文本数据
const handleChange = (editor) => {
  emit("onVal", valueHtml.value, props.index);
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>
<style scoped lang="scss">
:deep(.w-e-textarea-video-container) {
  video {
    max-width: 100%;
  }
}
.wangEditor {
  width: 100%;
}
</style>
